<!--
 (c) Copyright Ascensio System SIA 2020

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<title>Example add custom fields 2</title>
        
		<style type="text/css">
			html, body {
				margin   : 0px;
				padding  : 0px;
				overflow : hidden;
				width    : 100%;
				height   : 100%;
				font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
			}

			body {
				overflow-y: inherit;
			}
			
			.buttonDefault {
				font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
				height      : 22px;
				cursor      : pointer;
				border      : 1px solid silver;
				shadow      : 0 0;
				font-size   : 14px;				
				margin-left : calc(50% - 100px); 
				width       : 200px;	
				outline     : none;
			}
			
			.buttonDefault:hover{		
				border : 1px solid silver;
			}
			
			.buttonDefault:active{		
				border : 1px solid black;
			}

			.buttonSave {
				color         : black;
				background    : rgb(115, 177, 57);
				margin-bottom : 5px;
				margin-left   : calc(50% - 100px);
			}
		
			
			.buttonAddTextQ {
				margin-top  : 5px;
				color       : black;
				background  : rgb(190, 255, 255);
			}
				
			.buttonAddListQ {
				margin-top  : 5px;
				color       : black;
				background  : rgb(164, 171, 207);
			}
			
			.buttonInsertOption {
				margin-top  : 5px;
				color       : black;
				background  : rgb(255, 195, 128);
			}
			
			.buttonCopyField {
				margin-top  : 5px;
				color       : black;
				background  : rgb(218, 144, 234);
			}

			
			.propertiesContainer {
				margin-top    : 10px;
				width         : calc(100% - 20px);
				padding-left  : 10px;
				padding-right : 10px;
				border-top    : 1px solid silver;
			}
			
			.propertyTitle {
				padding-top    : 3px;
				padding-bottom : 3px;
				color          : black;
			}
			
			textarea.textAreaDefault {			
				resize     : none;				
				width      : calc(100% - 5px);
				background : rgb(211, 210, 211);
				border     : 1px solid rgb(143, 143, 143);
				outline    : none;
			}
			
			.inputDefault {
				border     : 1px solid rgb(143, 143, 143);
				background : rgb(211, 210, 211);
				outline    : none;
			}
		
			.roundButton {
			
				background-color : rgb(211, 210, 211);
				border           : 1px solid rgb(143, 143, 143);
				color            : black;
				text-align       : center;
				text-decoration  : none;
				display          : inline-block;
				font-size        : 20px;
				border-radius    : 50%;
				width            : 20px;
				height           : 20px;
				position         : relative;
				outline          : none;
				margin-left      : 5px;
				cursor           : pointer;
			}
			
			.roundButton:active {
				border-color : black;
			}
			
			.roundButton span {
				position  : absolute;
				top       : 50%;
				left      : 50%;
				transform : translate(-50%, -50%);
			}
			
		
			.inputTextQSubfields {
				width       : 150px;
				margin-left : 20px;
			}
			
			.divAddTextQContainerSubElement {
				margin-top : 3px;
				width      : 250px;			
				height     : 20px;
			}

			input[type="checkbox"].checkboxXMark {
				-webkit-appearance : initial;
				appearance         : initial;
				background         : rgb(211, 210, 211);
				width              : 20px;
				height             : 20px;
				border             : 1px solid rgb(143, 143, 143);
				position           : relative;
				outline            : none;
				margin             : 0px;
			}

			input[type="checkbox"].checkboxXMark:checked:after {
				content           : "X";
				position          : absolute;
				left              : 50%;
				top               : 50%;
				-webkit-transform : translate(-50%, -50%);
				-moz-transform    : translate(-50%, -50%);
				-ms-transform     : translate(-50%, -50%);
				transform         : translate(-50%, -50%);
			}

			label.checkboxXMarkLabel {
				position  : relative;
				top       : -2px;
				font-size : 14px;
			}

			label.checkboxXMarkLabel span {
				font-size : 10px;
				color     : rgb(110, 110, 110);
			}
			
			.inputAddTextQAnotherDescription {
				height : 18px;
				width  : 120px;
			}

			.inputAddTextQAnotherMaximum {
				height : 18px;
				width  : 30px;
			}

			input::-webkit-outer-spin-button,
			input::-webkit-inner-spin-button {
				-webkit-appearance : none;
				margin             : 0px;
			}

			div.paneElement {
				margin-top    : 10px;
				padding-left  : 10px;
				padding-right : 10px;
				width         : calc(100% - 40px);
			}

			div.paneElementInfo {
				margin-left : 30px;
				border      : 1px solid rgb(143, 143, 143);
			}

			div.paneElementInfoTitle {
				background : rgb(211, 210, 211);
			}

			div.paneElementInfoText {
				background : rgb(255, 255, 255);
				border-top : 1px solid rgb(143, 143, 143);
			}

			div.copyFieldElement {
				margin-left : 10px;
			}

			div.copyFieldSubElement {
				margin-left : 30px;
			}

			div.copyFieldAnotherLabel {
				margin-left : 30px;
				font-size   : 12px;
			}

			select.selectInsertOption {
				width            : calc(100% - 20px);
				outline          : none;
				background-color : rgb(211, 210, 211);
				border           : 1px solid rgb(143, 143, 143);
			}

			.selectInsertOptionCondition {
				width            : calc(50% - 20px);
				outline          : none;
				background-color : rgb(211, 210, 211);
				border           : 1px solid rgb(143, 143, 143);
			}

			div.selectInsertOptionConditionTitle {
				width            : calc(50% - 20px);
				outline          : none;
			}


		</style>

		<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
		<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
		<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
    	<script type="text/javascript" src="scripts/code.js"></script>
    </head>
	<body>

	<div>
		<button id="buttonAddTextQ" class="buttonDefault buttonAddTextQ btn-text-default">Add Text Q.</button>
		<div id="divAddTextQ" style="display:none;" class="propertiesContainer">

			<div class="propertyTitle" style="width:100%;float:left;">
				[Question Header]
			</div>
			<input id="inputAddTextQHeader" type="text" class="inputDefault" style="width:100%;float:left;"/>
			<div class="propertyTitle">
				[Question Text]
			</div>
			<textarea id="textareaAddTextQText" class="textAreaDefault" style="width:calc(100% - 4px);float:left;"></textarea>

			<div id="divAddTextQContainerSub" style="width:100%;float:left;">

				<div class="divAddTextQContainerSubElement">
					<input id="inputAddTextQSub0" type="text" class="inputDefault inputTextQSubfields"
						   style="float:left;"/>
					<button id="buttonAddTextQRemoveSub" class="roundButton" style="float:left;"><span>-</span>
					</button>
					<button id="buttonAddTextQAddSub" class="roundButton" style="float:left;"><span>+</span>
					</button>
				</div>

			</div>

			<div style="margin-top: 5px;width:100%;float:left;">

				<div style="float:left; padding-right: 5px;height:25px;">
					<form style="margin-top: 5px;">
						<input id="checkboxAddTextQAnother" class="form-control" type="checkbox"/>
						<label for="checkboxAddTextQAnother" class="checkboxXMarkLabel">Add another</label>
					</form>
				</div>

				<div style="float:left; padding-right: 15px;height:25px;">
					<input id="checkboxAddTextQAnotherDescription" placeholder="[describe]"
						   class="inputDefault inputAddTextQAnotherDescription" type="text"/>
				</div>

				<div style="float:left; height:25px;">
					<form>
						<label for="inputAddTextQAnotherMaximum" style="font-size:14px;">Maximum</label>
						<input id="inputAddTextQAnotherMaximum" class="inputDefault inputAddTextQAnotherMaximum"
							   type="number" min=0 max=999/>
					</form>
				</div>

			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxAddTextQNotEditable" class="form-control" type="checkbox"/>
						<label for="checkboxAddTextQNotEditable" class="checkboxXMarkLabel">Not Editable</label>
					</form>
				</div>
			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxAddTextQLogic" class="form-control" type="checkbox"/>
						<label for="checkboxAddTextQLogic" class="checkboxXMarkLabel">Use with Logic <span>(if checked this field shows in the "Insert option" tool)</span></label>
					</form>
				</div>
			</div>

			<div style="width:100%;float:left; border-bottom : 1px solid silver;">
				<button id="buttonAddTextQSave" class="buttonDefault buttonSave btn-text-default">Save</button>
			</div>

		</div>

		<button id="buttonAddListQ" class="buttonDefault buttonAddListQ btn-text-default">Add List Q.</button>
		<div id="divAddListQ" style="display:none;" class="propertiesContainer">

			<div class="propertyTitle" style="width:100%;float:left;">
				[Question Header]
			</div>
			<input id="inputAddListQHeader" style="width:100%;float:left;" type="text" class="inputDefault" style="width : 100%;"/>
			<div class="propertyTitle" style="width:100%;float:left;">
				[Question Text]
			</div>
			<textarea id="textareaAddListQText" class="textAreaDefault" style="width:calc(100% - 4px);float:left;"></textarea>

			<div id="divAddListQContainerElements" style="margin-top:5px; width:100%;float:left;">

				<div class="divAddTextQContainerSubElement">
					<input id="inputAddListQElements0" type="text" class="inputDefault inputTextQSubfields"
						   style="float:left;"/>
					<button id="buttonAddListQRemoveElement" class="roundButton" style="float:left;"><span>-</span>
					</button>
					<button id="buttonAddListQAddElement" class="roundButton" style="float:left;"><span>+</span>
					</button>
				</div>

			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxAddListQAllowMultiple" class="form-control" type="checkbox"/>
						<label for="checkboxAddListQAllowMultiple" class="checkboxXMarkLabel">Allow Multiple
							Selections <span>(if not checked, only one selection allowed; if checked, more than one selection is allowed)</span></label>
					</form>
				</div>
			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxAddListQLogic" class="form-control" type="checkbox"/>
						<label for="checkboxAddListQLogic" class="checkboxXMarkLabel">Use with Logic <span>(if checked this field shows in the "Insert option" tool)</span></label>
					</form>
				</div>
			</div>

			<div style="width:100%;float:left; border-bottom : 1px solid silver;">
				<button id="buttonAddListQSave" class="buttonDefault btn-text-default buttonSave">Save</button>
			</div>
		</div>

		<button id="buttonInsertOption" class="buttonDefault btn-text-default buttonInsertOption">Insert Option</button>
		<div id="divInsertOption" style="display:none;" class="propertiesContainer">
			<div class="propertyTitle" style="width:100%;float:left;">
				This option shows if:
			</div>
			<select id="selectInsertOptionField" class="selectInsertOption" style="float:left;">
			</select>

			<div style="width:100%;float:left;margin-top:5px;">
				<div class="selectInsertOptionConditionTitle" style="float:left;">
					Choose Condition
				</div>

				<div class="selectInsertOptionConditionTitle" style="margin-left:20px;float:left;">
					Choose option
				</div>
			</div>

			<div style="width:100%;float:left;margin-top:5px;">
				<select id="selectInsertOptionCondition" class="selectInsertOptionCondition" style="float:left;">
					<option>equals</option>
					<option>does not equal</option>
					<option>contains</option>
					<option>does not contain</option>
					<option>is more than</option>
					<option>is less than</option>
				</select>

				<select id="selectInsertOptionValue" class="selectInsertOptionCondition" style="margin-left:20px; float:left;display: none;">
				</select>

				<input id="inputInsertOptionValue" class="selectInsertOptionCondition" style="margin-left:20px; float:left;display: none;"/>
			</div>

			<div style="margin-top: 5px;width:100%;float:left;">
				<div style="float:left; padding-right: 5px;">
					<form>
						<input id="checkboxInsertOptionAdditional" class="form-control" type="checkbox"/>
						<label for="checkboxInsertOptionAdditional" class="checkboxXMarkLabel">Add an additional requirement to make the condition true.</label>
					</form>
				</div>
			</div>

			<div style="width:100%;float:left; border-bottom : 1px solid silver;">
				<button id="buttonInsertOptionInsert" class="buttonDefault btn-text-default buttonSave">Insert</button>
			</div>
		</div>

		<button id="buttonCopyField" class="buttonDefault btn-text-default buttonCopyField">Copy Field</button>
		<div id="divCopyField" style="display:none;padding-top: 5px;" class="propertiesContainer">

			<div style="width:100%; border-bottom : 1px solid silver;">
				<button id="buttonCopyFieldInsert" class="buttonDefault btn-text-default buttonSave">Insert Field</button>
			</div>
		</div>

		<div id="divQuestionPane" style="width:100%;">
		</div>

	</div>


	</body>
</html>